<template>
<div>
    <div class="table-title">
        <span>资质信息</span>
        <Icon v-show="$route.params.type != 'detail'" style="float:right;margin-top:8px;" type="ios-add-circle-outline" size="24" color="#2d8cf0" @click="addQualification" />
    </div>
    <Table highlight-row border :columns="columns12" :data="obj.qualificationList" @on-row-click="handleRow">
        <template slot="action" slot-scope="{ row, index }">
            <Icon type="ios-remove-circle-outline" size="24" color="#2d8cf0" @click="removeQualification(index)" />
        </template>
    </Table>
    <div class="table-title" style="margin-top:20px;">
        <span>许可证信息</span>
        <Icon v-show="$route.params.type != 'detail'" style="float:right;margin-top:8px;" type="ios-add-circle-outline" size="24" color="#2d8cf0" @click="addLicense" />
    </div>
    <Table border :columns="columns" :data="obj.licenseList" @on-row-click="handleRow1">
        <template slot="action">
            <Icon type="ios-remove-circle-outline" size="24" color="#2d8cf0" @click="removeLicense(index)" />
        </template>
    </Table>
</div>
</template>

<script>
import {
    mapMutations
} from 'vuex'
export default {
    props: ['obj'],
    data() {
        return {
            zzImgObj: {},
            token:'',
            file:'',
            indexNum:'',
            indexNum1:'',
            downloadAction:process.env.VUE_APP_FILE_SERVER_URL+'file/downFile',
            columns12: [{
                    title: '序号',
                    align: 'center',
                    render: (h, params) => {params.index
                        return h('span', 
                            params.index + 1
                        )
                    }
                },
                {
                    title: '证书编号',
                    key: 'qualificationNo',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                value: params.row.qualificationNo,
                                size: 'small',
                                disabled : this.$route.params.type == 'detail' ? true : false,
                                maxlength:20
                            },
                            on: {
                                input: value => {
                                    params.row.qualificationNo = value;
                                    this.obj.qualificationList[params.index].qualificationNo = value;
                                }
                            }
                        })
                    }
                },
                {
                    title: '主项资质',
                    key: 'mainQualification',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                value: params.row.mainQualification,
                                size: 'small',
                                disabled : this.$route.params.type == 'detail' ? true : false,
                                maxlength:60
                            },
                            on: {
                                input: value => {
                                    params.row.mainQualification = value
                                    this.obj.qualificationList[params.index].mainQualification = value;
                                }
                            }
                        })
                    }
                },
                {
                    title: '增项资质',
                    key: 'additionQualification',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                value: params.row.additionQualification,
                                size: 'small',
                                disabled : this.$route.params.type == 'detail' ? true : false,
                                maxlength:60
                            },
                            on: {
                                input: value => {
                                    params.row.additionQualification = value
                                    this.obj.qualificationList[params.index].additionQualification = value;
                                }
                            }
                        })
                    }
                },
                {
                    title: '有效期至',
                    key: 'deadLine',
                    align: 'center',
                    render: (h, params) => {
                        return h('DatePicker', {
                            props: {
                                clearable: false,
                                placeholder: '请选择日期',
                                value: params.row[params.column.key],
                                type: 'date',
                                format: 'yyyy-MM-dd',
                                size: 'small',
                                transfer: true,
                                disabled : this.$route.params.type == 'detail' ? true : false
                            },
                            on: {
                                'on-change': value => {
                                    params.row.deadLine = value;
                                    this.obj.qualificationList[params.index].deadLine = value;
                                }
                            }
                        })
                    }
                },
                this.$route.params.type == 'detail' ? {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        if(params.row.attachmentIdList[0]){
                                            window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                        }
                                    }
                                }
                            }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                        ]);
                    }
                } : this.$route.params.type == 'edit' ? {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.attachmentIdList[0]){
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.attachmentIdList[0]){
                                                window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                            }
                                        }
                                    }
                                }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                                h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.obj.qualificationList[params.index].attachmentIdList = []
                                            }
                                        }
                                    }, '删除')
                            ]);
                        }else{
                            return  h(
                                'Upload', {
                                    props: {
                                        type: 'drag',
                                        action: process.env.VUE_APP_FILE_SERVER_URL + 'file/uploadFile',
                                        maxSize:5124,
                                        format:['DOC','DOCX','PPT','TXT','PDF','XLS','XLSX','ZIP','RAR'],
                                        data: {
                                            token: this.token,
                                            key:this.file,
                                            num:params.index
                                        },
                                        'on-success': this.hanleUploadSuc,
                                        'on-format-error':this.formatError,
                                        'on-exceeded-size': this.exceededSize
                                    },
                                },
                                '请选择上传文件'
                            )  
                        }
                    }
                } : {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.attachmentIdList[0]){
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.attachmentIdList[0]){
                                                window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                            }
                                        }
                                    }
                                }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                                h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.obj.qualificationList[params.index].attachmentIdList = []
                                            }
                                        }
                                    }, '删除')
                            ]);
                        } else {
                            return  h(
                                'Upload', {
                                    props: {
                                        type: 'drag',
                                        action: process.env.VUE_APP_FILE_SERVER_URL + 'file/uploadFile',
                                        maxSize:5124,
                                        format:['DOC','DOCX','PPT','TXT','PDF','XLS','XLSX','ZIP','RAR'],
                                        disabled : this.$route.params.type == 'detail' ? true : false,
                                        data: {
                                            token: this.token,
                                            key:this.file,
                                            num:params.index
                                        },
                                        'on-success': this.hanleUploadSuc,
                                        'on-format-error':this.formatError,
                                        'on-exceeded-size': this.exceededSize
                                    },
                                },
                                '请选择上传文件'
                            )  
                        }
                    }
                },
                this.$route.params.type == 'detail' ? {
                    title: '',
                    slot: '',
                    width: 1,
                    align: '',
                } : {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                }
            ],
            columns: [{
                    title: '序号',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + 1)
                    }
                },
                {
                    title: '证书编号',
                    key: 'licenseNo',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                value: params.row.licenseNo,
                                size: 'small',
                                disabled : this.$route.params.type == 'detail' ? true : false,
                                maxlength:20
                            },
                            on: {
                                input: value => {
                                    params.row.licenseNo = value;
                                    this.obj.licenseList[params.index].licenseNo = value;
                                }
                            }
                        })
                    }
                },
                {
                    title: '有效期至',
                    key: 'deadLine',
                    align: 'center',
                    render: (h, params) => {
                        return h('DatePicker', {
                            props: {
                                clearable: false,
                                placeholder: '请选择日期',
                                value: params.row[params.column.key],
                                type: 'date',
                                format: 'yyyy-MM-dd',
                                size: 'small',
                                transfer: true,
                                disabled : this.$route.params.type == 'detail' ? true : false
                            },
                            on: {
                                'on-change': value => {
                                    params.row.deadLine = value;
                                    this.obj.licenseList[params.index].deadLine = value
                                }
                            }
                        })
                    }
                },
                this.$route.params.type == 'detail' ? {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        if(params.row.attachmentIdList[0]){
                                            window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                        }
                                    }
                                }
                            }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                        ]);
                    }
                } : this.$route.params.type == 'edit' ? {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.attachmentIdList[0]){
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.attachmentIdList[0]){
                                                window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                            }
                                        }
                                    }
                                }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.obj.licenseList[params.index].attachmentIdList = []
                                        }
                                    }
                                }, '删除')
                            ]);
                        }else{
                            return  h(
                                'Upload', {
                                    props: {
                                        type: 'drag',
                                        action: process.env.VUE_APP_FILE_SERVER_URL + 'file/uploadFile',
                                        maxSize:5124,
                                        format:['DOC','DOCX','PPT','TXT','PDF','XLS','XLSX','ZIP','RAR'],
                                        disabled : this.$route.params.type == 'detail' ? true : false,
                                        data: {
                                            token: this.token,
                                            key:this.file,
                                            num:params.index
                                        },
                                        'on-success': this.hanleUploadSuc1,
                                        'on-format-error':this.formatError,
                                        'on-exceeded-size': this.exceededSize
                                    },
                                },
                                '请选择上传文件'
                            )  
                        }
                    }
                } : {
                    title: '附件',
                    key: 'attachmentIdList',
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.attachmentIdList[0]){
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.attachmentIdList[0]){
                                                window.open(this.downloadAction+'/'+params.row.attachmentIdList[0])
                                            }
                                        }
                                    }
                                }, params.row.attachmentIdList[0] ? '下载附件' : '暂无附件'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                           this.obj.licenseList[params.index].attachmentIdList = []
                                        }
                                    }
                                }, '删除')
                            ]);
                        }else{
                            return  h(
                                'Upload', {
                                    props: {
                                        type: 'drag',
                                        action: process.env.VUE_APP_FILE_SERVER_URL + 'file/uploadFile',
                                        maxSize:5124,
                                        format:['DOC','DOCX','PPT','TXT','PDF','XLS','XLSX','ZIP','RAR'],
                                        disabled : this.$route.params.type == 'detail' ? true : false,
                                        data: {
                                            token: this.token,
                                            key:this.file,
                                            num:params.index
                                        },
                                        'on-success': this.hanleUploadSuc1,
                                        'on-format-error':this.formatError,
                                        'on-exceeded-size': this.exceededSize
                                    },
                                },
                                '请选择上传文件'
                            )  
                        }
                    }
                },
                this.$route.params.type == 'detail' ? {
                    title: '',
                    slot: '',
                    width: 1,
                    align: '',
                } : {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                }
            ]
        }
    },
    methods: {
        addQualification() {
            let qualification = {
                qualificationNo: '',
                mainQualification: '',
                additionQualification: '',
                deadLine: '',
                attachmentIdList: []
            };
            this.obj.qualificationList.push(qualification)
        },
        removeQualification(index) {
            this.obj.qualificationList.splice(index, 1)
        },
        addLicense() {
            let license = {
                licenseNo: '',
                deadLine: '',
                attachmentIdList: []
            };
            this.obj.licenseList.push(license)
        },
        removeLicense(index) {
            this.obj.licenseList.splice(index, 1)
        },
        hanleUploadSuc(res) {
            this.file = res.fileIds
            this.$Message.success('上传成功')
            this.pushData()
        },
        formatError(res){
            this.$Message.warning('请上传DOC、DOCX、PPT、TXT、PDF 、XLS、XLSX、ZIP、RAR格式文件!')
        },
        exceededSize(res){
            this.$Message.warning('文件最大不能超过5兆')
        },
        hanleUploadSuc1(res) {
            this.file = res.fileIds
            this.$Message.success('上传成功')
            this.pushData1()
        },
        pushData(){
            this.obj.qualificationList[this.indexNum].attachmentIdList = []
            this.obj.qualificationList[this.indexNum].attachmentIdList.push(this.file)
        },
        pushData1(){
            this.obj.licenseList[this.indexNum1].attachmentIdList = []
            this.obj.licenseList[this.indexNum1].attachmentIdList.push(this.file)
        },
        handleRow(data,index){
            this.indexNum = index
        },
        handleRow1(data,index){
            this.indexNum1 = index
        }

    },
    beforeDestroy() {
        console.log('A组件被beforeDestroy')
    },
    destroyed() {
        console.log('A组件被destroyed')
    }
}
</script>

<style scoped>
.table-title {
    height: 40px;
    line-height: 40px;
    border: 1px solid #dcdee2;
    border-bottom: none;
    padding: 0 10px;
}
</style>
